<template>
  <div class="goods">
    <div class="navbar-div">
      <van-nav-bar
        title="商品详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="topimage-div">
      <img :src="goodsInfo.IMAGE1" width="100%"/>
    </div>
    <div class="goods-name">{{goodsInfo.NAME}}</div>
    <div class="goods-price">价格：{{goodsInfo.PRESENT_PRICE | moneyFilter}}</div>
    <van-tabs swipeable sticky>
      <van-tab title="商品详情">
        <div class="detail" v-html="goodsInfo.DETAIL"></div>
      </van-tab>
      <van-tab title="评价">
          正在制作中
      </van-tab>
    </van-tabs>
    <div class="goods-bottom">
      <div><van-button size="large" type="primary" @click="addGoodsToCart">加入购物车</van-button></div>
      <div><van-button size="large" type="danger">直接购买</van-button></div>
    </div>
  </div>
</template>

<script>
import axios from '@/axios/axios.js';
import toMoney from '@/filters/moneyFilter.js'
export default {
  name: 'Goods',
  data() {
    return {
      goodsId: '',
      goodsInfo: {},    // 后台返回的商品详细信息
    }
  },
  filters: {
    moneyFilter(money) {
      return '￥ ' + toMoney(money) + '元';
    }
  },
  created() {
    this.goodsId = this.$route.query.goodsId ? this.$route.query.goodsId : this.$route.params.goodsId;
    if (!this.goodsId) this.goodsId = sessionStorage.goodsId;
    this.getInfo();
    sessionStorage.goodsId = this.goodsId;
  },
  methods: {
    getInfo() {     // 获取商品信息
      axios.ajax({
        method: 'POST',
        url: this.$url.goods.goodsInfo,
        data: {
          goodsId: this.goodsId
        }
      }).then(res => {
        // console.log('res', res);
        if (res.data) {
          this.goodsInfo = res.data;
        }
      }).catch(err => {
        console.log('error', err);
      })
    },
    onClickLeft() {   // 点击页面左上角的返回按钮时，返回上一页
      this.$router.go(-1);
    },
    addGoodsToCart() {
      let cartInfo = localStorage.cartInfo ? JSON.parse(localStorage.cartInfo) :[]
      //判断购物车内是否已经有这个商品。如果没有返回undeifnd，如果有返回第一个查找到的数据
      let isHaveGoods=cartInfo.find(cart=>cart.goodsId==this.goodsId)
      if(!isHaveGoods) {
        let newGoodsInfo={
          goodsId:this.goodsInfo.ID,
          name:this.goodsInfo.NAME,
          price:this.goodsInfo.PRESENT_PRICE,
          image:this.goodsInfo.IMAGE1,
          count:1
        }
        cartInfo.push(newGoodsInfo) //添加到购物车
        localStorage.cartInfo = JSON.stringify(cartInfo)
        this.$toast.success('添加成功')
      } else {
        this.$toast.success('已有此商品')
      }
      this.$router.push({name:'Cart'})
    }
  }
}
</script>

<style lang="stylus" scoped>
.navbar-div /deep/ .van-nav-bar__title {
  font-weight: bold;
}
.goods {
  padding-bottom: 100px;
}
.goods-name, .goods-price {
  background-color: #fff;
}
.detail {
  font-size: 0px;
}

// 固定在底部的2个按钮的样式
.goods-bottom {
  position: fixed;
  bottom: 50px;
  left: 0px;
  right: 0px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  & > div {
    flex: 1;
    padding: 0.375rem;
  }
}
</style>